<template>
  <div class="reseller">
    <div class="closeButton" @click="close">
      <img src="@/assets/icon/close.png" />
    </div>
    <p style="font-size: 120%; font-weight: bold">
      以下均是闲鱼上的倒卖狗，希望大家擦亮双眼。
    </p>
    <div class="container">
      <div v-for="(imagePath, index) in 8" :key="index" class="image">
        <img :src="require('@/assets/pic/' + (index + 1) + '.jpg')" />
      </div>
    </div>
  </div>
</template>

<script>
/*eslint-disable*/
import PubSub from "pubsub-js";

export default {
  name: "倒卖者名单",
  methods: {
    close() {
      PubSub.publish("resellerShowControll", false);
    },
  },
};
</script>

<style lang="less" scoped>
@import "../less/variables.less";
.closeButton {
  padding: 10px;
  background-color: @red;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 1%;
  right: 1%;
  > img {
    width: 15px;
  }
}

.closeButton:hover {
  cursor: pointer;
}

.image {
  margin: 1% 3%;
  border-radius: 10px;
  box-shadow: 2px 2px 2px 0.5px rgba(0, 0, 0, 0.3);
  display: inline-block;
  position: relative;
  --fontSize: 200%;
  > img {
    object-fit: cover;
    width: 500px;
    border-radius: 10px;
  }
}

.image::after {
  content: "🤡";
  position: absolute;
  top: -15px;
  right: -15px;
  padding: 5px;
  background-color: white;
  box-shadow: @box-shadowRed;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: var(--fontSize);
  z-index: 9999;
  transition: font-size 0.3s ease, transform 0.3s ease;
}

.image:hover {
  --fontSize: 500%;
}
</style>